<template>
	<scroll-view scroll-y class="background_white">
		<view style="margin: 0 0rpx;background-color: white;max-height:75vh" v-if="dialogshow">
			<!-- 上部分 -->
			<view class="flex_col" style="padding: 24rpx;">
				<view style="font-size: 28rpx;color: #36393E;" class="bold">地址与交通</view>
				<view class="flex_row" style="margin-top: 20rpx;">
					<text class="iconfont icon_location_grey" style="font-size: 26rpx;color: grey;"/>
					<view style="font-size: 24rpx;color: #161E22;margin-left: 4rpx;width:600rpx" class="single_line">{{store_detail.address.province_name + store_detail.address.city_name + store_detail.address.address}}</view>
				</view>
				<view style="height: 24rpx;"/>
				<view style="font-size: 28rpx;color: #36393E;" class="bold">直播环境</view>
				<view v-for="item,index in (!show_all ? store_detail.room_list : store_detail.room_list.slice(0,2))" :key="index" style="margin-top: 24rpx;">
					<live_room_item :live_room="item"/>
				</view>
				<view style="height: 28rpx;"></view>
				<view class="center display" style="width: 702rpx" v-if="show_all != null">
					<view v-if="show_all" class="flex_row center"  @click="see_all(true)">
						<view style="font-size:24rpx;color: #999999;">查看更多直播间</view>
						<view style="width: 8rpx;"></view>
						<text class="iconfont icon_arrow_down" style="font-size: 14rpx;color: #999999;"/>
					</view>
					<view @click="see_all(false)" v-else class="flex_row center" >
						<view style="font-size:24rpx;color: #999999;">收起</view>
						<!-- <text class="iconfont iconarro"/> -->
					</view>
				</view>
			</view>
			<view style="background-color: #FAFAFA;height: 16rpx;"></view>
			<!-- 选择可排期时间 -->
			<view class="flex_col" style="padding:26rpx">
				<view style="font-size: 28rpx;color: #161E22;" class="bold">选择可排期时间</view>
				<view class="flex_row">
					<view style="font-size: 20rpx;color: #FF3E3E;">选择可接受的直播场次，最多可选择4次</view>
					<view class="flex"/>
					<view style="font-size: 20rpx;color: #36393E;">已选{{total_count}}</view>
				</view>
			</view>
			<!-- 日期 -->
			<scroll-view :scroll-x="true" style="margin: 0 40rpx;">
				<view class="date_list"
					:style="'background-color:' + (dark?'#272f30':'white') + ';padding-top:' + (dark ? '22rpx' : '0rpx') + ';padding-bottom:' + (dark ? '8rpx' : '0rpx') + ';'">
					<view v-for="(item, index) in date_list_primary" :key="index"
						:class="'weekDate ' + (item.selected ? 'current': 'normal')" @tap="switchDay(index)"
						:data-currentday="item">
						<view class="flex_col center relative"
							:style="{'border-radius':'4rpx','width':'80rpx','height':'80rpx','margin-right':'40rpx','margin-top':'20rpx', 'background-color':item.selected ? 'black' : 'white'}">
							<view v-if="item.count!= 0" style="transform:translateY(-15rpx);"
								:class="'flex_row center item_count'">
								{{item.count}}</view>
							<view :class="item.selected ? 'selected_week' : 'unselected_week'">
								{{item.weekText}}
							</view>
							<view :class="item.selected ? 'selected_date' : 'unselected_date'">
								{{item.dayText}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 选择时间段 -->
			<view class="flex_row wrap center" 	:class="[activeAnimateClass]"
				style="padding:28rpx;padding-top:0;background-color: #FAFAFA;justify-content: space-between;">
			<!-- 	<swiper class="swiper" :duration="1000" :touchable="false" style="width:100%;">
					<swiper-item v-for="time,j in date_list_primary" :key="j"> -->
						<view v-for="item,index in date_list_primary[activeIndex].timeslots" :key="index">
							<view v-if="item.confirm" class="flex_col center time_unselected">
								<view style="font-size: 20rpx;color: #CFD1D6;">{{item.start_time_show + "-" + item.end_time_show }}</view>
								<view style="font-size: 20rpx;color: #CFD1D6;">已被预约</view>
							</view>
							<view v-else @click="click_time(item,index,activeIndex)"
								:class="'flex_row center ' + (item.selected ? 'time_selected' : 'time_unselected')">
								{{item.start_time_show + "-" + item.end_time_show }}
							</view>
						</view>
			<!-- 		 </swiper-item>
				</swiper> -->
			</view>
			<!-- 提交 -->
			<fl_btn @click="confirmSubmit" text="确认提交"></fl_btn>
			<view style="height: 68rpx;"></view>
		</view>
	</scroll-view>
	
</template>

<script>
	import {EventBus} from "../utils/event_bus.js"
	import live_room_item from "./items/live_room_item.vue"
	import fl_btn from "./fl_btn.vue"
	// component/weekday.js
	import store from '../utils/store.js'
	import {
		request
	} from "../api/request.js"
	import {getTargetTime, formatDate} from "../utils/utils.js"
	const moment = require("../utils/moment.js");
	const dayToWeekDayMapping = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
	const dayToDay = [{"Sun":"周日"}, {"Mon":"周一"},{"Tue":"周二"},{"Wed":"周三"},{"Thu":"周四"},{"Fri":"周五"},{"Sat":"周六"}];
	const weekDayEnglish = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
		"October", "November", "December"
	]; // const weekDayEnglish = [
	export default {
		name: "weekday",
		data() {
			return {
				show_all:null,//超过两个 显示
				dayTransfer: {
					"Sun": "周日",
					"Mon":"周一",
					"Tue":"周二",
					"Wed":"周三",
					"Thu":"周四",
					"Fri":"周五",
					"Sat":"周六"
				},
				animation: 0,
				activeIndex: 0,
				date_list: [],
				date_list_primary: [],
				selected_date_primary: [],
				selected_date: null,
				monthText: null,
				monthEnglish: null,
				revervation_list: [], //时间表
				selected_revervation: {}, //选中的时间表
				selected_revervation_index: 0, //选中时间表的index
				store_detail:{
					
				},
				total_count:0,
			};
		},
		computed: {
			activeAnimateClass() {
				let animate_class
				if(this.animation === 1) {
					animate_class = 'fadeInLeft'
				}else if(this.animation === 2) {
					animate_class = 'fadeInRight'
				}else {
					animate_class = ''
				}
				return animate_class
			}
		},
		watch: {
			// 监听弹窗关闭，关闭后重置所有选择数据
			dialogshow(val) {
				this.revervation_list = []
				if(!val){
					for(let i in this.date_list_primary){
						this.date_list_primary[i].count = 0;
						this.date_list_primary[i].timeslots.forEach(item => {
							item.selected = false
						})
					}
					this.activeIndex = 0;
					this.total_count = 0
				}
			}
		},
		components: {
			fl_btn,
			live_room_item
		},
		props: {
			selectedDay: Object,
			dark: Boolean,
			store_code: {
				type: String
			},
			dialogshow: Boolean
		},
		beforeMount: function() {
			// this.loadDateList();
		},
		created() {
			if(store.state.hasLogin){
				console.log('走了吗11')
				this.getPlaceDetail()
				this.getPalletRevervation()
				EventBus.$on(this.constants.REFRESH_PLACE_CENTER,e=>{
					this.getPlaceDetail()
				})
			}
			
		},
		methods: {
			see_all(all){
				console.log(all)
				this.show_all = !all
			},
			// 关闭弹窗
			close() {
				console.log('关闭弹窗时走了吗-------')
				this.date_list_primary.forEach(item => {
					item.count = 0
				})
			},
			// 确认提交
			confirmSubmit(){
				console.log('点击确定提交',this.revervation_list)
				// debugger
				this.$emit('confirmSubmit',this.revervation_list,this.store_detail.user_phone_always_visible)
			},
			//点击时间
			click_time(item, index, activeIndex) {
				// 定义被选择的日期和时间
				let date_id = this.date_list_primary[activeIndex].date_id
				let timeslots = this.date_list_primary[activeIndex].timeslots[index]
				let chooseTime = {
					date_id: date_id,
					timeslots: [timeslots]
				}
				// 如果被选中则
				if(item.selected){
					this.total_count--
					this.date_list_primary[activeIndex].count--
					// 如果这个日期里只有这一个选项则直接删除这一项，如果有两项则删除其中一项
					for(let i=0; i<this.revervation_list.length; i++) {
						if(this.revervation_list[i].date_id === date_id) {
							let len = this.revervation_list[i].timeslots.length
							for(let j=len-1; j>=0; j--) {
								if(this.revervation_list[i].timeslots[j] === timeslots) {
									if(this.revervation_list[i].timeslots.length === 1) {
										this.revervation_list.splice(i,1)
									} else {
										this.revervation_list[i].timeslots.splice(j,1)
									}
								}
							}
						}
					}
				}else{
					if(this.total_count === 4){
						this.showToast("您的时段已选满")
						return
					}
					this.total_count++
					this.date_list_primary[activeIndex].count++
					// 如果这个日期里没有这个选项则直接添加这一项，如果有则在这一项的timeslot数组里添加这一项
					let flag = true
					for(let i=0; i<this.revervation_list.length; i++) {
						if(this.revervation_list[i].date_id === date_id) {
							// 如果之前有则在日期里添加时间段
							this.revervation_list[i].timeslots.push(timeslots)
							flag = false
						}
					}
					// 如果之前没有则直接添加日期
					if(flag){
						this.revervation_list.push(chooseTime)
					}
				}
				this.date_list_primary[activeIndex].timeslots[index].selected = !item.selected
			},
			// 获取直播间时间表
			getPalletRevervation() {
				request({
					url: this.Api.GetPalletRevervation + this.store_code,
					method: "GET",
					data: {},
					success: (response) => {
						this.date_list_primary = response.data.dataset.data
						console.log('最初始的数据-------',this.date_list_primary)
						for (var i = 0; i < this.date_list_primary.length; i++) {
							var item = this.date_list_primary[i]
							// 初始化日期选择项为false，次数为0
							item.selected = i===0 ? true : false
							item.count = 0
							// 根据后端字段转换日期和周几
							const weekText = item.date_id.slice(item.date_id.length-2)
							item.weekText = weekText.slice(0,1) === '0' ? weekText.slice(1) : weekText
							item.dayText = this.dayTransfer[item.weekday]
							// 转换展示的时间段
							item.timeslots.forEach((e) => {
								e.selected = false
								// e.end_time_show = this.formatDate(this.getTargetTime(e.end_time)+1).slice(11,16)
								e.start_time_show = e.start_time.slice(11,16)
								e.end_time_post = e.end_time.slice(11)
								e.start_time_post = e.start_time.slice(11)
								e.end_time_show = moment(e.end_time).add("seconds", 1).format("HH:mm")
								//e.start_time_show = moment(e.start_time).format("HH:mm")
								if (e.end_time_show == "00:00") {
									e.end_time_show = "24:00"
								}
							})
						}
					},
					fail: () => {
						console.log("fail")
					},
					complete: () => {
						console.log("complete")
					},
				})
			},
			//获取直播地点详情
			getPlaceDetail() {
				request({
					url: this.Api.GetPalletPlace + this.store_code,
					method: "GET",
					data: {},
					success: (response) => {
						this.store_detail = response.data.dataset.data
						// console.log("直播间详情" + JSON.stringify(response))
						this.store_detail.room_list = [].concat(this.store_detail.room_list) //.concat(this.store_detail.room_list).concat(this.store_detail.room_list).concat(this.store_detail.room_list).concat(this.store_detail.room_list).concat(this.store_detail.room_list).concat(this.store_detail.room_list).concat(this.store_detail.room_list)
						if(this.store_detail.room_list.length > 2){
							this.show_all = true
						}
						// this.show_all = this.store_detail.room_list.length > 1
					},
					fail: () => {
						console.log("fail")
					},
					complete: () => {
						console.log("complete")
					},
				})
			},
			test() {
				console.log("test")
			},
			getSelectedDate() {
				return this.selected_date;
			},
			set_index: function() {
				this.selected_date = this.date_list[1]
			},

			switchDay: function(index) {
				console.log('选择日期')
				//  设置动画
				index > this.activeIndex ? this.animation = 1 : this.animation = 2
				let _this = this
				setTimeout(()=>{
					_this.animation = 0	
				},500)
				this.activeIndex = index
				this.date_list_primary.forEach((item, i) => {
					if( i === index) {
						this.date_list_primary[i].selected = true
					}else{
						this.date_list_primary[i].selected = false
					}
				})
				this.$forceUpdate()
				// this.selected_date = e.currentTarget.dataset.currentday
				// this.selected_revervation_index = e.currentTarget.dataset.currentday.index

				// this.$emit('weekdaychange', {
				// 	detail: {
				// 		date: e.currentTarget.dataset.currentday
				// 	}
				// });
			}
		}
	};
</script>
<style>
	.selected_week {
		color: white;
		font-size: 18rpx;
	}

	.unselected_week {
		color: #97989C;
		font-size: 18rpx;
	}

	.selected_date {
		color: white;
		font-size: 28rpx;
	}

	.unselected_date {
		color: #97989C;
		font-size: 28rpx;
		border-radius: 12rpx;
	}

	.weekDayClass {
		display: flex;
		flex-direction: column;
		background-color: #FFF;
		padding: 0rpx 28rpx 22rpx 28rpx;
		margin: 0rpx 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8px 0 rgba(212, 212, 212, 0.8);
	}

	.date_list {
		display: flex;
		/* justify-content: space-around; */
		align-items: center;
	}

	.date_list .weekDate {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		/* padding: 0 22rpx 0 22rpx; */
	}

	.date_list .current {
		/* background-color: #2EC3B1;
  color: #FFF;
  border-radius: 6rpx; */
	}

	.date_list .current .weekText {
		font-size: 24rpx;
		color: #101010;
		font-weight: bold;
	}

	.date_list .current .dayText {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #272F30;
		font-size: 24rpx;

		font-weight: bold;
	}

	.date_list .normal .weekText {
		color: #101010;
		font-size: 24rpx;
	}

	.date_list .normal .dayText {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #9E9E9E;
		font-size: 24rpx;
	}

	.date_list .current .indicator {
		width: 52rpx;
		height: 4rpx;
		background-color: #2EC3B1;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.date_list .normal .indicator {
		width: 52rpx;
		height: 4rpx;
		background-color: #fff;
	}

	.item_count {
		width: 24rpx;
		height: 24rpx;
		right: 0;
		top: 0;
		font-size: 20rpx;
		position: absolute;
		color: white;
		background-color: red;
		border-radius: 10rpx;
	}

	.time_selected {
		margin-top: 28rpx;
		background-color: white;
		width: 336rpx;
		height: 72rpx;
		border: solid 2rpx #00C2C4;
		border-radius: 2rpx;
		color: #00C2C4;
		font-size: 28rpx;
		box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.1);
	}
	.time_unselected {
		margin-top: 28rpx;
		background-color: white;
		border-radius: 2rpx;
		width: 336rpx;
		height: 72rpx;
		border: solid 2rpx white;
		color: $black;
		font-size: 28rpx;
	}
	@-webkit-keyframes fadeInLeft
	{
		0%
		{
			opacity: 0;
			-webkit-transform: translate3d(-100%,0,0);
			transform: translate3d(-100%,0,0)
		}
	
		to
		{
			opacity: 1;
			-webkit-transform: none;
			transform: none
		}
	}
	@keyframes fadeInLeft
	{
		0%
		{
			opacity: 0;
			-webkit-transform: translate3d(-100%,0,0);
			transform: translate3d(-100%,0,0)
		}
		to
		{
			opacity: 1;
			-webkit-transform: none;
			transform: none
		}
	}
	@-webkit-keyframes fadeInRight
	{
		0%
		{
			opacity: 0;
			-webkit-transform: translate3d(100%,0,0);
			transform: translate3d(100%,0,0)
		}
	
		to
		{
			opacity: 1;
			-webkit-transform: none;
			transform: none
		}
	}
	@keyframes fadeInRight
	{
		0%
		{
			opacity: 0;
			-webkit-transform: translate3d(100%,0,0);
			transform: translate3d(100%,0,0)
		}
		to
		{
			opacity: 1;
			-webkit-transform: none;
			transform: none
		}
	}
	.fadeInLeft,.fadeInRight {
		-webkit-animation-duration:0.5s;
		animation-duration:0.5s;
		-webkit-animation-fill-mode:both;
		animation-fill-mode:both;
	}
	.fadeInLeft {
		-webkit-animation-name: fadeInLeft;
		animation-name: fadeInLeft;
	}
	.fadeInRight {
		-webkit-animation-name: fadeInRight;
		animation-name: fadeInRight;
	}
</style>
